<!--
 * @Description  : 
 * @Autor        : guoxi
 * @Date         : 2022-07-21 14:35:42
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-08-22 13:43:49
 * @FilePath     : \rpms\src\views\project\create\components\goal.vue
-->
<template>
  <el-button
    v-if="!isApproval && !model.dis"
    @click="handleAdd"
    class="btnClass"
    type="primary"
    icon="el-icon-plus"
  />
  <el-table
    :data="model.tableData"
    border
    style="width: 100%"
    :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
  >
    <template #empty>
      <el-empty :image-size="50" description="暂无数据"></el-empty>
    </template>
    <el-table-column type="index" label="序号"> </el-table-column>
    <el-table-column prop="target" label="目标及考核指标"></el-table-column>
    <el-table-column label="类型">
      <template #default="{ row }">
        {{
          row.resultType &&
          model.types.find(el => el.key === row.resultType).label
        }}
      </template>
    </el-table-column>
    <el-table-column prop="num" label="数值"></el-table-column>
    <el-table-column label="变更状态" v-if="model.dis">
      <template #default="{ row }">
        {{
          row.alterationType === "add"
            ? "新增"
            : row.alterationType === "delete"
            ? "删除"
            : row.alterationType === "update"
            ? "编辑"
            : ""
        }}
      </template>
    </el-table-column>

    <el-table-column label="操作" v-if="!isApproval && !model.dis">
      <template #default="{ row, $index }">
        <el-button type="text" @click="handleEdit(row, $index)">编辑</el-button>
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon="el-icon-info"
          icon-color="red"
          title="确定删除该条记录吗？"
          @confirm="handleDelete(row, $index)"
        >
          <template #reference>
            <el-button type="text">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    :title="model.isEdit ? '修改项目目标及考核指标' : '添加项目目标及考核指标'"
    v-model="model.dialogFormVisible"
    destroy-on-close
    width="45vw"
  >
    <el-form
      :model="model.formData"
      ref="formRef"
      @submit.prevent
      :rules="model.formRules"
      label-width="150px"
    >
      <el-row>
        <el-col>
          <el-form-item label="目标及考核指标" prop="target">
            <el-input
              resultType="textarea"
              v-model="model.formData.target"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="类型" prop="resultType">
            <el-select
              class="w40"
              v-model="model.formData.resultType"
              clearable
              placeholder="请选择"
              value-key="id"
              @change="handleSelected"
            >
              <el-option
                v-for="item in model.types"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item> </el-col
      ></el-row>

      <el-row>
        <el-col>
          <el-form-item label="数值" prop="num">
            <el-input v-model="model.formData.num"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row justify="end">
      <el-button @click="model.dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </el-row>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import { cloneDeep } from "lodash-es";
import { useRoute } from "vue-router";
export default defineComponent({
  name: "Member",
  props: {
    data: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },

  //   emits: ["change", "load"],
  setup(props, ctx) {
    console.log(props, ctx);
    const route = useRoute();
    const isApproval = route.query.mode === "approval" ? true : false;
    const formRef = ref<HTMLFormElement | null>(null) as any;
    const model = reactive({
      dis: props.disabled,
      deleteList: [],
      index: 0,
      isEdit: false,
      dialogFormVisible: false,
      types: [
        { key: "1", label: "新产品" },
        { key: "2", label: "新装置" },
        { key: "3", label: "新材料" },
        { key: "4", label: "新工艺/方法/模式" },
        { key: "5", label: "专利" },
        { key: "6", label: "软件著作权" },
        { key: "7", label: "论文" },
        { key: "8", label: "专著" },
        { key: "9", label: "标准" },
        { key: "10", label: "研究报告" },
        { key: "11", label: "计算机软件" },
        { key: "12", label: "技术指标" },
        { key: "13", label: "其他" }
      ],
      tableData: [],
      formData: {
        target: "",
        resultType: "",
        num: 0,
        alterationType: null
      },
      formRules: {
        target: [
          { required: true, message: "请输入目标及考核指标", trigger: "change" }
        ],
        resultType: [
          { required: true, message: "请选择类型", trigger: "change" }
        ],
        num: [{ required: true, message: "请输入数值", trigger: "change" }]
      }
    });
    const handleSubmit = async () => {
      const isValid = await new Promise(resolve =>
        formRef.value.validate(resolve)
      );
      if (!isValid) return;
      if (model.isEdit) {
        model.tableData[model.index] = cloneDeep(model.formData);
      } else {
        model.tableData.push(model.formData);
      }

      model.dialogFormVisible = false;
    };
    const handleAdd = () => {
      model.formData = {
        target: "",
        resultType: "",
        num: 0,
        alterationType: null
      };
      if (route.query.mode === "change") {
        model.formData.alterationType = "add";
      }
      model.isEdit = false;
      model.dialogFormVisible = true;
    };
    const handleEdit = (row, index) => {
      model.dialogFormVisible = true;
      model.isEdit = true;
      model.index = index;
      if (route.query.mode === "change") {
        row["alterationType"] = "update";
      }
      model.formData = cloneDeep(row);
    };
    const handleDelete = (row, index) => {
      if (route.query.mode === "change" && row.alterationType == null) {
        row["alterationType"] = "delete";
        model.deleteList.push(row);
      }
      model.tableData.splice(index, 1);
    };
    onMounted(() => {
      model.tableData = props.data || [];
    });

    watch(
      () => props.data,
      newvalue => {
        model.tableData = newvalue || [];
      },

      { immediate: false }
    );
    return {
      isApproval,
      model,
      formRef,
      handleSubmit,
      handleAdd,
      handleEdit,
      handleDelete
    };
  }
});
</script>
<style lang="scss" scoped>
.btnClass {
  margin-bottom: 10px;
}
</style>
